.#{$ns}Images {
  display: flex;
  flex-wrap: wrap;
  margin: -$gap-xs;

  &-item {
    display: flex;
    margin: $gap-xs;
  }
}

.#{$ns}Image {
  display: inline-block;
  width: px2rem(120px);
  border: $borderWidth solid $borderColor;
  padding: $gap-xs;

  &-thumb {
    width: 100%;
    height: px2rem(108px);
    background-image: url('');
    overflow: hidden;
    position: relative;

    > img {
      position: absolute;
      left: 50%;
      top: 50%;
      max-height: 100%;
      width: auto;
      transform: translate(-50%, -50%);
    }
  }

  &-thumb--4-3 {
    height: px2rem(108px * 3 / 4);
  }

  &-thumb--16-9 {
    height: px2rem(108px * 9 / 16);
  }

  &-thumb--w-full > img {
    width: 100%;
    height: auto;
  }

  @supports (object-fit: contain) {
    &-thumb--contain > img {
      position: static;
      width: 100% !important;
      height: 100% !important;
      transform: translate(0, 0);
      top: 0;
      left: 0;
      object-fit: contain;
    }
  }

  @supports (object-fit: cover) {
    &-thumb--cover > img {
      position: static;
      width: 100% !important;
      height: 100% !important;
      transform: translate(0, 0);
      top: 0;
      left: 0;
      object-fit: cover;
    }
  }

  &-caption {
    font-size: $fontSizeSm;
  }

  &-overlay {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    top: 0;
    left: 0;

    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    color: #fff;

    > div {
      width: 100%;
      text-align: center;
      margin-bottom: 5px;
    }

    > a {
      cursor: pointer;
      color: #fff;
      display: inline-block;
      padding: 0 5px;
      line-height: 1;
      font-size: px2rem(16px);
    }
  }

  &-thumb:hover &-overlay {
    display: flex;
  }
}

.#{$ns}ImageField {
  display: inline-block;
  position: relative;
}
